<template>
  <view>
    <view class="searchbox">
      <view class="search">
        <image
          src="https://www.123qifu.com/onlineimages/static/Shopping/sous.png"
          class="searchImg"
          mode=""
        ></image>
        <input
          type="text"
          value=""
          v-model="content"
          placeholder="搜索用户/话题/祈福"
          class="searchInp"
          @confirm="search"
        />
      </view>
    </view>
    <view class="intervals">
      <view class="" v-show="Searchhistory">
        <view class="">
          <view class="history">
            <view class="sousuo">搜索历史</view>
            <image
              src="https://www.123qifu.com/onlineimages/static/delete.png"
              mode=""
              style="height: 28rpx; width: 28rpx"
              @click="empty"
            ></image>
          </view>

          <!-- 搜索内容 -->
          <view class="content">
            <view
              class="contentPray"
              v-for="(item, index) in itemList"
              :key="index"
              @click="historysearch(item)"
              >{{ item }}</view
            >
          </view>
        </view>
      </view>
      <view class="" v-show="tabulation">
        <view class="tab">
          <view class="choice" v-for="(item, index) in searchList" :key="index">
            <view
              :class="current == item.index ? 'active' : ''"
              @click="choice(item.index)"
              >{{ item.title }}</view
            >
          </view>
        </view>
        <!-- 用户列表 -->
        <view class="" v-show="current == 2">
          <view class="Nousers" v-if="userList.length <= 0">
            <image class="imgn" src="https://www.123qifu.com/onlineimages/static/nolt.png" mode="" />
            <text>没有搜索到相关内容~</text>
          </view>
          <view class="boder" v-for="(item, index) in userList" :key="index">
            <view class="user">
              <image :src="item.avatar" mode="" class="qifu"></image>
              <view class="xinwen">{{ item.nickname }}</view>
              <view class="yguanzhu" v-show="item.is_show == 1 ? true : false"
                >已关注</view
              >
              <view
                class="guanzhu"
                v-show="item.is_show == 2 ? true : false"
                @click="follow(item.id)"
                >+关注</view
              >
            </view>
          </view>
        </view>
        <!-- 话题列表 -->
        <view class="content_one" v-show="current == 1">
          <view class="Nousers" v-if="ConversationList.length <= 0">
            <image class="imgn" src="https://www.123qifu.com/onlineimages/static/nolt.png" mode="" />
            <text>没有搜索到相关内容~</text>
          </view>
          <view
            class="sec1"
            v-for="(content, index) in ConversationList"
            :key="index"
          >
            <view class="top">
              <view class="lef">
                <image
                  class="avtar"
                  :src="imgurl + content.cover_image"
                  mode="aspectFit"
                />
                <view class="huat">
                  <view class="ht1"> <span>#</span>{{ content.title }}</view>
                  <view class="ht2">
                    <image
                      class="cyic"
                      src="https://www.123qifu.com/onlineimages/static/canyIcon.png"
                      mode=""
                    />{{ content.joinNum }}人参与
                  </view>
                </view>
              </view>
              <view class="rig" @click="join(content.id, content.title)"
                >加入</view
              >
            </view>
            <view class="text">{{ content.content }}</view>
            <view class="imglis">
              <image
                v-for="(item, index) in content.images"
                v-show="item.length == 0 ? false : true"
                :key="index"
                class="imgls"
                :src="imgurl + item"
                mode="aspectFill"
                @click="picClcik(content.images, index)"
              />
            </view>
          </view>
        </view>
        <!-- 祈福列表 -->
        <view class="" v-show="current == 3">
          <view class="Nousers" v-if="qifuList.length <= 0">
            <image class="imgn" src="https://www.123qifu.com/onlineimages/static/nolt.png" mode="" />
            <text>没有搜索到相关内容~</text>
          </view>
          <view class="lists" v-for="(item, index) in qifuList" :key="index">
            <image
              class="imgs"
              :src="imgurl + item.cover_image"
              mode="aspectFill"
            />
            <view class="rig">
              <view class="top">
                <h3>{{ item.title }}</h3>
                <h4>{{ item.description }}</h4>
              </view>
              <view class="bott">
                <view class="nums">
                  <image
                    class="canyIcon"
                    src="https://www.123qifu.com/onlineimages/static/canyIcon.png"
                    mode="widthFix"
                  />
                  {{ item.join_num }}人参与
                </view>
                <view
                  class="btns"
                  @click="tooffering(item)"
                  v-if="item.type == 1"
                  >供奉</view
                >
                <view
                  class="btns"
                  @
                  @click="tokaiguang(item)"
                  v-if="item.type == 2 "
                  >开光</view
                >
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 开光弹出层 -->
    <uni-popup ref="kaiguang" type="center">
      <view class="duang">
        <view @click="tolongrange(kaigID)">远程开光</view>
        <view @click="tooffline(kaigID)">线下开光</view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      itemList: [],
      searchList: [
        { title: "用户", index: 2 },
        { title: "话题", index: 1 },
        { title: "祈福", index: 3 },
      ],
      content: "",
      current: 2,
      Searchhistory: true,
      tabulation: false,
      token: "",
      type: 2,
      userList: [],
      ConversationList: [],
      qifuList: [],
      imgurl: "https://www.123qifu.com/",
      himList: [],
      kaigID: "",
    };
  },
  onLoad() {
    this.token = uni.getStorageSync("token");
  },
  onShow() {
    let that = this;
    uni.getStorage({
      key: "Searchhistory",
      success: function (res) {
        that.itemList = res.data;
        that.himList = res.data;
      },
    });
  },
  methods: {
    async choice(index) {
      let that = this;
      that.current = index;
      that.type = index;
      const res = await that.$myRequest({
        url: "index/search",
        method: "POST",
        data: {
          keyWord: that.content,
          type: that.type,
        },
      });
      if (res.data.code !== 1) return;

      that.userList = [];
      that.ConversationList = [];
      that.qifuList = [];

      if (index == 1) {
        that.ConversationList = res.data.data.data;
      } else if (index == 2) {
        that.userList = res.data.data.data;
      } else if (index == 3) {
        that.qifuList = res.data.data.data;
      }
    },
    async search() {
      let that = this;
      that.Searchhistory = false;
      that.tabulation = true;
      const res = await that.$myRequest({
        url: "index/search",
        method: "POST",
        header: {
          token: that.token,
        },
        data: {
          keyWord: that.content,
          type: that.type,
        },
      });
      if (res.data.code !== 1) return;
      that.userList = res.data.data.data;
      that.himList.push(that.content);
      uni.setStorage({
        key: "Searchhistory",
        data: that.himList,
      });
    },
    // 点击历史搜索
    async historysearch(item) {
      const that = this;

      that.content = item;
      that.Searchhistory = false;
      that.tabulation = true;
      const res = await that.$myRequest({
        url: "index/search",
        method: "POST",
        header: {
          token: that.token,
        },
        data: {
          keyWord: item,
          type: that.type,
        },
      });
      if (res.data.code !== 1) return;
      that.userList = res.data.data.data;
    },
    //图片预览
    picClcik(item, index) {
      let that = this;
      let imgsArray = [];
      for (let i = 0; i < item.length; i++) {
        imgsArray.push(that.$IMG_URL + item[i]);
      }

      uni.previewImage({
        urls: imgsArray,
        current: imgsArray[index],
      });
    },
    // 远程开光
    tolongrange(kaigID) {
      this.$refs.kaiguang.close();
      uni.navigateTo({
        url: "../pray/long-range/long-range?pray_id=" + kaigID,
      });
    },
    // 线下开光
    tooffline(kaigID) {
      this.$refs.kaiguang.close();

      uni.navigateTo({
        url: "../pray/kaiguang/kaiguang?pray_id=" + kaigID,
      });
    },

    // 关注
    async follow(userid) {
      let that = this;
      const res = await that.$myRequest({
        url: "user/addCare",
        method: "POST",
        header: {
          token: that.token,
        },
        data: {
          uid: userid,
        },
      });
      if (res.data.code !== 1) return;
      uni.showToast({
        title: "关注成功",
        icon: "none",
      });
      that.choice(2);
    },
    // 加入话题
    join(id, title) {
      uni.navigateTo({
        url: "../Supplication/Supplication?id=" + id + "&title=" + title,
      });
    },
    tooffering(item) {
      uni.navigateTo({
        url: "../pray/Offering/Offering?id=" + item.id,
      });
      uni.setStorage({
        key: "gfList",
        data: item,
      });
    },
    tokaiguang(item) {
      this.kaigID = item.id;
      uni.navigateTo({
        url: "../pray/long-range/long-range?pray_id=" + this.kaigID,
      });
      uni.setStorage({
        key: "kgList",
        data: item,
      });
    },

    // 清空搜索历史
    empty() {
      let that = this;
      if (that.itemList.length == 0) {
        uni.showToast({
          title: "暂无搜索历史",
          icon: "none",
        });
      } else {
        uni.showModal({
          // title: '提示',
          content: "确定清空搜索历史？",
          success: function (res) {
            if (res.confirm) {
              uni.removeStorageSync("Searchhistory");
              that.itemList.splice(0);
            } else if (res.cancel) {
              console.log("用户点击取消");
            }
          },
        });
      }
    },
  },
};
</script>

<style lang="scss">
page {
  background-color: #fff;
}
.searchbox {
  box-sizing: border-box;
  width: 714rpx;
  height: 64rpx;
  background: #f4f4f4;
  border-radius: 32rpx;
  margin: 0 auto;
  .search {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: 0 30rpx;
    .searchImg {
      display: block;
      width: 32rpx;
      height: 32rpx;
    }
    .searchInp {
      flex: 1;
      margin-left: 22rpx;
      font-size: 28rpx;
      font-weight: 400;
      color: #333333;
    }
    .searchInp::-webkit-input-placeholder {
      color: #999999;
    }
  }
}
.intervals {
  margin: 48rpx auto 0;
}
.content {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  padding: 0rpx 30rpx;
  box-sizing: border-box;
  .contentPray {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    background: #f7f7f7;
    font-size: 26rpx;
    color: #666666;
    border-radius: 40rpx;
    margin: 10rpx 10rpx;
    padding: 14rpx 30rpx;
  }
}
.history {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30rpx 40rpx;
  .sousuo {
    font-size: 34rpx;
    font-weight: 500;
    color: #333333;
  }
}
.tab {
  width: 100%;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 0 30rpx;
  border-bottom: 20rpx solid #f4f4f4;
  .choice {
    margin-right: 52rpx;
    padding-bottom: 30rpx;
    font-size: 34rpx;
    font-weight: 500;
    color: #999;
    position: relative;
  }
  .active {
    font-size: 34rpx;
    font-weight: 400;
    color: #333;
  }
  .active::after {
    position: absolute;
    content: "";
    width: 48rpx;
    height: 6rpx;
    background: #c52b2e;
    border-radius: 30rpx;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
  }
}
.boder {
  border-bottom: 1rpx solid #eee;
}
.boder:last-of-type {
  border-bottom: none;
}
.user {
  width: 100%;
  height: 150rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 0 30rpx;
  .qifu {
    width: 90rpx;
    height: 90rpx;
    border-radius: 50%;
  }
  .xinwen {
    font-size: 30rpx;
    font-weight: 500;
    color: #333333;
    flex: 1;
    padding-left: 25rpx;
  }
  .yguanzhu {
    width: 142rpx;
    height: 54rpx;
    background: #f7f7f7;
    border-radius: 27rpx;
    font-size: 26rpx;
    text-align: center;
    line-height: 54rpx;
    font-weight: 400;
    color: #666666;
  }
  .guanzhu {
    width: 142rpx;
    height: 54rpx;
    background-color: #c52b2e;
    font-size: 26rpx;
    border-radius: 27rpx;
    text-align: center;
    line-height: 54rpx;
    color: #ffffff;
  }
}
.Nousers {
  .imgn {
    display: block;
    width: 348rpx;
    height: 190rpx;
    margin: 222rpx auto 0;
  }
  text {
    display: block;
    text-align: center;
    font-size: 30rpx;
    font-weight: 400;
    color: #999999;
    margin-top: 24rpx;
  }
}
.content_one {
  display: flex;
  flex-direction: column;
  font-size: 21rpx;
  color: #333333;
}

.sec1 {
  width: 100%;
  min-height: 200rpx;
  background: #fff;
  box-sizing: border-box;
  padding: 30rpx;
  overflow: hidden;
  border-bottom: 20rpx solid #f4f4f4;
  .top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .lef {
      display: flex;
      align-items: center;
      .avtar {
        display: block;
        width: 90rpx;
        height: 90rpx;
        margin-right: 25rpx;
      }
      .huat {
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        justify-content: space-between;
        .ht1,
        .ht2 {
          display: flex;
          align-items: center;
          span {
            display: block;
            font-size: 30rpx;
            color: #c52b2e;
            margin-right: 15rpx;
          }
        }
        .ht1 {
          font-size: 30rpx;
          font-weight: 550;
          color: #373737;
        }
        .ht2 {
          .cyic {
            display: block;
            width: 18rpx;
            height: 18rpx;
            margin-right: 15rpx;
          }
          font-size: 20rpx;
          font-weight: 400;
          color: #999999;
        }
      }
    }
    .rig {
      width: 114rpx;
      height: 50rpx;
      border: 1rpx solid #c52b2e;
      border-radius: 50rpx;
      text-align: center;
      line-height: 50rpx;
      font-size: 30rpx;
      font-weight: 400;
      color: #c52b2e;
    }
  }
  .text {
    font-size: 28rpx;
    font-weight: 400;
    color: #333333;
    text-align: justify;
    margin-top: 25rpx;
  }
  .imglis {
    width: 105%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 30rpx;
    .imgls {
      display: block;
      width: 220rpx;
      height: 220rpx;
      margin-right: 15rpx;
      margin-bottom: 15rpx;
      border-radius: 8rpx;
    }
  }
}
.sec1:last-of-type {
  border-bottom: none;
}
.duang {
  width: 232rpx;
  height: 180rpx;
  background-color: #ffffff;
  border-radius: 40rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  color: #f7224e;
  position: relative;
  top: 400rpx;
}

.content_text {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 0 0 20rpx;
  font-size: 21rpx;
  color: #333333;

  .contentAll {
    display: flex;
    align-items: center;
    color: #666;
  }

  .contentImg {
    margin-left: 10rpx;
    width: 15rpx;
  }
}
.lists {
  width: 100%;
  box-sizing: border-box;
  padding: 30rpx;
  border-bottom: 1rpx solid #eee;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .imgs {
    width: 180rpx;
    height: 200rpx;
    margin-right: 18rpx;
    border-radius: 8rpx;
  }
  .rig {
    height: 200rpx;
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: space-between;
    .top {
      h3 {
        font-size: 30rpx;
        font-weight: 500;
        color: #373737;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        overflow: hidden;
      }
      h4 {
        font-size: 24rpx;
        font-weight: 400;
        color: #999999;
        margin-top: 10rpx;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }
    }
  }
  .bott {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    .nums {
      display: flex;
      align-items: center;
      font-size: 20rpx;
      font-weight: 400;
      color: #999999;
      .canyIcon {
        display: block;
        width: 18rpx;
        height: 18rpx;
        margin-right: 10rpx;
      }
    }
    .btns {
      display: block;
      width: 114rpx;
      height: 50rpx;
      background: #c52b2e;
      border-radius: 25rpx;
      text-align: center;
      line-height: 50rpx;
      font-size: 30rpx;
      font-weight: 400;
      color: #ffffff;
    }
  }
}
.lists:last-child {
  border-bottom: none;
}
</style>
